<template>
  <div style="width: 100%;height: 100vh">
    <div v-if="show" class="login" :style="'background-image:url('+ Background +');height: 100vh; '">
      <el-form
        ref="loginForm"
        :model="loginForm"
        label-position="left"
        label-width="0px"
        class="login-form"
      >
        <h3 class="title">
          用户绑定
        </h3>
        <el-form-item prop="username" :rules="[{ required: true, trigger: 'blur', message: '用户名不能为空' }]">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password" :rules="[{ required: true, trigger: 'blur', message: '密码不能为空' }]">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleAppLogin"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="code" :rules="[{ required: true, trigger: 'change', message: '验证码不能为空' }]">
          <el-input
            v-model="loginForm.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter.native="handleAppLogin"
          >
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode">
          </div>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleAppLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      <!--  底部  -->
      <div v-if="setting.showFooter" id="el-login-footer">
        <span v-html="setting.footerTxt" />
      </div>
    </div>
    <div v-else v-loading.fullscreen.lock="true" />
  </div>
</template>
<script>
import { encrypt } from '@/utils/rsaEncrypt'
import Config from '@/settings'
import Background from '@/assets/images/background.jpg'
import { requestGet } from '@/api/system/common'
import { getToken } from '@/utils/auth'
export default {
  name: 'Login',
  data() {
    return {
      setting: Config,
      Background: Background,
      show: false,
      codeUrl: '',
      loginForm: {
        username: '', // 登录账号
        password: '', // 登录密码
        openId: '', // 绑定账号
        code: '', // 验证码
        uuid: '', // uuid
        type: '' // 绑定类型
      },
      loading: false, // 加载状态
      redirect: '' // 重定向地址
    }
  },
  created() {
    this.loginForm.openId = this.$route.query.openid === undefined ? '' : this.$route.query.openid
    this.loginForm.type = this.$route.query.openid === undefined ? '' : this.$route.query.type
    this.redirect = this.$route.query.redirect === undefined ? '' : this.$route.query.redirect
    if (this.loginForm.openId === '' || this.loginForm.type === '') {
      this.$alert('获取绑定信息失败！点击‘确定’按钮，系统将使用默认登录方式登录，' +
        '或者关闭此页面，尝试重新打开此应用', '绑定失败！', {
        confirmButtonText: '确定',
        callback: action => {
          if (action === 'confirm') {
            this.$router.push({ path: '/login' })
          }
        }
      })
    }
    if (getToken()) {
      this.$router.push({ path: '/uc/login?openid=' + this.loginForm.openId })// 登录成功，跳转到指定地址，或者根路径
    } else {
      this.show = true
      this.getCode()
    }
  },
  methods: {
    // 获取验证码信息
    getCode() {
      requestGet('auth/code', {}).then(res => {
        this.codeUrl = res.img
        this.loginForm.uuid = res.uuid
      })
    },
    handleAppLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          openId: this.loginForm.openId,
          type: this.loginForm.type,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid
        }
        if (user.password !== this.cookiePass) {
          user.password = encrypt(user.password)
        }
        if (valid) {
          this.loading = true
          this.$store.dispatch('oauthLogin', user).then(() => { // 执行登录
            this.loading = false
            this.$router.push({ path: '/uc/index' })// 登录成功，跳转到指定地址，或者根路径
          }).catch((data) => { // 登录异常，重新获取验证码
            this.loading = false
            this.$message.info(data.msg)
            this.getCode()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-size: cover;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 385px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle
  }
}
</style>
